/***
  =========================================================================
  SUI  varsion 0.1
  created by sven  QQ: 836096989  update 2015/12/18
  人类所有创造发明都是为了节约时间
  =========================================================================

  =========================================================================
  统一html,
  全屏、默认字体颜色大小行高 中文雅黑，英文Arial。关闭iphone横竖屏字体大小自动调整功能.
  所有元素设定边框盒。统一边距,禁止用户选择文本，高亮透明没有边框的轮廓 没有内外边距
  设置img的基线 去掉下面那个空白部份....   与其ui一起使用就不需要了。
  =========================================================================

html,body{
    color: #000000;
    background-color: #ffffff;
    font:16px/25px Microsoft YaHei, Arial, sans-serif;

    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;

    width:100%;
    height:100%;
}

*{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-user-select: none;

    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: transparent;

    outline: none;
    padding:0;
    margin:0;
}

textarea {
    overflow: hidden;
    resize: none;
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

button,
input,
optgroup,
select,
textarea {
    margin: 0;
    font: inherit;
    color: inherit;
}

select,
input[type="text"],
input[type="search"],
input[type="password"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="color"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"] {
    width: 100%;
    height: 40px;

    -webkit-appearance: none;

    padding: 10px 15px;
    line-height: 21px;

    -webkit-user-select: text;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 3px;
    outline: none;
}

hr {
    height: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}

img{
    vertical-align:middle;
}

ul, li {
    overflow:hidden;
    list-style:none;
}

p{
    color:#8f8f94;
    line-height:25px;
}

.sui-content{
    width:100%;
    overflow:hidden;
}

.sui-content-padding{
    overflow:hidden;
    padding:10px;
}

*/

/***
  =========================================================================
  弹性布局
  纵向排列，纵向局中排列
  横向排列，横向局中排列
  1，2，3，4 个不同等份
  =========================================================================
*/
.sui-flex-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-flex-flow: column;
    flex-flow: column;
}

.sui-flex-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-flex-flow: row;
    flex-flow: row;
}

.sui-flexcenter-row {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal;
    -webkit-flex-flow: row;
    flex-flow: row;

    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.sui-flexcenter-col {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: vertical;
    -webkit-flex-flow: column;
    flex-flow: column;

    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.sui-flex1 { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; }
.sui-flex2 { -webkit-box-flex: 2; -webkit-flex: 2; flex: 2; }
.sui-flex3 { -webkit-box-flex: 3; -webkit-flex: 3; flex: 3; }
.sui-flex4 { -webkit-box-flex: 4; -webkit-flex: 4; flex: 4; }

/***
  =========================================================================
  网格布局
  用sui-table-view，sui-table-view-cell的padding，float的做出一个
  内边距8px，格子之间间隔4px,的不定数最大12格的的格子列表，自动去除浮动响影
  =========================================================================
*/
.sui-table-view{
    overflow: hidden;
    padding: 8px 6px 4px 6px;
    zoom:1;
}
.sui-table-view:after{
    height:0;
    clear:both;
    display: block;
    content: " ";
    display:block;
    visibility:hidden;
}

.sui-table-view-cell {
    position: relative;
    padding: 0 2px 4px 2px;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    background: none;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-touch-callout: none;
}

.sui-view-cell-1,
.sui-view-cell-2,
.sui-view-cell-3,
.sui-view-cell-4,
.sui-view-cell-5,
.sui-view-cell-6,
.sui-view-cell-7,
.sui-view-cell-8,
.sui-view-cell-9,
.sui-view-cell-10,
.sui-view-cell-11{ position:relative; float: left;}
.sui-view-cell-12 { width:100%; position: relative;}
.sui-view-cell-1{ width: 8.33333333%;}
.sui-view-cell-2{ width: 16.66666667%;}
.sui-view-cell-3{ width: 25%;}
.sui-view-cell-4{ width: 33.33333333%;}
.sui-view-cell-5{ width: 41.66666667%;}
.sui-view-cell-6{ width: 50%;}
.sui-view-cell-7{ width: 58.33333333%;}
.sui-view-cell-8{ width: 66.66666667%;}
.sui-view-cell-9{ width: 75%;}
.sui-view-cell-10{ width: 83.33333333%;}
.sui-view-cell-11{ width: 91.66666667%;}

.sui-clearfix {
    zoom:1;
}

.sui-clearfix:after {
    height:0;
    clear:both;
    display: block;
    content: " ";
    display:block;
    visibility:hidden;
}

/***
  =========================================================================
  常用的颜色
  白，黑，灰，黄，篮，粉
  =========================================================================
*/
.sui-color-white{color:#ffffff;}
.sui-color-black{color:#000000;}
.sui-color-gray{color:#8f8f94;}
.sui-color-yellow{color:#ff7720;}
.sui-color-blue{color:#007aff;}
.sui-color-pink{color:#fcaebb;}

/***
  =========================================================================
  文本排版
  左，中 ，右，英文两端对齐
  =========================================================================
*/
.sui-text-left { text-align: left !important;}
.sui-text-center { text-align: center !important;}
.sui-text-right { text-align: right !important;}
.sui-text-right { text-align: justify !important;}

/***
  =========================================================================
  SUI 图标
  =========================================================================
*/
@font-face {
    font-family:"suiicon";
    font-size: 16px;
    src:url('../../fonts/suiicon.ttf') format('truetype');
}

.sui-icon{
    font-family: "suiicon" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

.sui-icon-xiangtop:before{content: "\e609";}                      /** 上   **/
.sui-icon-xiangbottom:before{content: "\e607";}                   /** 下   **/
.sui-icon-xiangleft:before{content: "\e60b";}                     /** 左   **/
.sui-icon-xiangright:before{content: "\e60a";}                    /** 右   **/
.sui-icon-nan:before{content: "\e605";}                           /** 男   **/
.sui-icon-nv:before{content: "\e603";}                            /** 女   **/
.sui-icon-feji:before{content: "\e612";}                          /** 飞机 **/
.sui-icon-jinbi:before{content: "\e613";}                         /** 金币 **/
.sui-icon-star:before{content: "\e611";}                          /** 星   **/
.sui-icon-pinglun:before{content: "\e600";}                       /** 评论 **/
.sui-icon-phone:before{content: "\e614";}                         /** 手机 **/
.sui-icon-shezhi:before{content: "\e60c";}                        /** 设置 **/
.sui-icon-zan:before{content: "\e601";}                           /** 赞   **/
.sui-icon-ka:before{content: "\e615";}                            /** 卡   **/
.sui-icon-xing:before{content: "\e608";}                          /** 心   **/
.sui-icon-share:before{content: "\e610";}                         /** 分享 **/
.sui-icon-suo:before{content: "\e602";}                           /** 锁   **/
.sui-icon-shijan:before{content: "\e60d";}                        /** 时间 **/
.sui-icon-liwu:before{content: "\e606";}                          /** 礼物 **/
.sui-icon-weizhi:before{content: "\e604";}                        /** 位置 **/


